<template>
    <div class="content-wrap">
        <div class="content-top-box">
            <!-- 搜索区域 -->
            <ul class="search-container">
                <li>
                    <span class="search-item-name">创建时间：</span>
                    <el-date-picker
                        v-model="date"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        @change="changeDate">
                    </el-date-picker>
                </li>
                <li>
                    <span class="search-item-name">标题：</span>
                    <el-input
                        class="search-item-content search-item-text"
                        placeholder="请输入标题"
                        v-model="title"
                        clearable
                        maxlength="11"
                        @clear="clearTitleFn"
                    >
                    </el-input>
                </li>
                <li>
                    <el-button class="search-btn" type="primary" icon="el-icon-search" @click="searchFn" v-if="searchBtn">查询</el-button>
                    <el-button class="search-btn" type="primary" icon="el-icon-plus" @click="addFn" v-if="addBtn">新增</el-button>
                    <el-button class="search-btn" type="primary" icon="el-icon-s-fold" @click="showLimitFn" v-if="limitBtn">展示数量限制</el-button>
                </li>
            </ul>
        </div>

        <div class="content-bottom-box">
            <!-- 表格 -->
            <div class="content-form-box">
                <el-table
                    v-loading="loadingFlag"
                    :data="tableData"
                    :height="tableHeight"
                    ref="table"
                    border
                    stripe
                    style="width: 100%"
                >
                    <el-table-column
                        prop="serialNumber"
                        label="序号"
                        width="60"
                        :show-overflow-tooltip="true"
                        fixed
                        >
                    </el-table-column>
                    <el-table-column
                        label="图片类型"
                        width="200"
                        :show-overflow-tooltip="true"
                        fixed
                        >
                        <template slot-scope="scope">
                            <span>{{scope.row.type == 1 ? 'banner图片' : '活动图片'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="title"
                        label="标题"
                        width="200"
                        :show-overflow-tooltip="true"
                        >
                    </el-table-column>
                    <el-table-column
                        label="图片预览"
                        width="120"
                        >
                        <template slot-scope="scope">
                            <el-button @click="checkImgFn(scope.row.picUrl)" type="text" size="small">【查看】</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="startTime"
                        label="开始时间"
                        width="180"
                        :show-overflow-tooltip="true"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="endTime"
                        label="结束时间"
                        width="180"
                        :show-overflow-tooltip="true"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="seqNo"
                        label="排序"
                        width="80"
                        :show-overflow-tooltip="true"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="createUser"
                        label="创建人"
                        :show-overflow-tooltip="true"
                        width="160"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="createTime"
                        label="创建时间"
                        width="180"
                        :show-overflow-tooltip="true"
                        >
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="editInfoFn(scope.row.id)" type="text" size="small" v-if="editBtn">编辑</el-button>
                            <el-button @click="deleteInfoFn(scope.row.id, scope.row.title)" type="text" size="small" v-if="deleteBtn">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 页码 -->
            <div class="content-Page-container">
                <BaseFormPage 
                    :pagination="pagination"
                    @cFirstPageFn="cFirstPageFn"
                    @cLastPageFn="cLastPageFn"
                    @cJumpPageFn="cJumpPageFn"
                    @cPreFn="cPreFn"
                    @cNextFn="cNextFn"
                    @cRefreshFn="cRefreshFn"
                    >
                </BaseFormPage>
            </div>
        </div>

        <!-- 展示数量限制 -->
        <el-dialog
            :title="limitTitle"
            :visible.sync="limitDialogFlag"
            width="456px"
            :show-close="false"
            top="30vh"
            center
            class="banner-limit-wrap">
            <div class="dialog-wrap">
                <span class="limit-name">展示数量</span>
                <el-select
                    class="search-item-content"
                    v-model="limitNum" 
                    placeholder="请选择"
                    @change="changeLimitNum"
                >
                    <el-option
                        v-for="item in limitOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="limitDialogFlag = false">取 消</el-button>
                <el-button size="small" type="primary" @click="submitLimitFn">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 新增/编辑 -->
        <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogFlag"
            width="714px"
            :show-close="false"
            center
            class="banner-dialog-content">
            <div class="dialog-wrap">
                <div class="dialog-wrap-left">
                    <el-form 
                        :model="ruleForm" 
                        :rules="rules" 
                        ref="ruleForm" 
                        :hide-required-asterisk="true"
                        label-width="100px" 
                        class="form-box"
                    >
                        <el-form-item label="图片类型" prop="bannerType">
                            <el-select v-model="ruleForm.bannerType" placeholder="请选择">
                                <el-option label="banner图片" value="1"></el-option>
                                <!-- <el-option label="活动图片" value="2"></el-option> -->
                            </el-select>
                        </el-form-item>
                        <el-form-item label="标题" prop="bannerTitle">
                            <el-input 
                                v-model="ruleForm.bannerTitle" 
                                placeholder="图片标题，长度2~20字" 
                                maxlength="20"
                                show-word-limit
                                clearable>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="链接URL" prop="linkUrl" v-if="ruleForm.bannerType == 2">
                            <el-input v-model="ruleForm.linkUrl" placeholder="跳转页面链接URL" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="有效时间" v-if="ruleForm.bannerType == 2">
                            <el-col :span="11">
                                <el-form-item prop="validityDate">
                                    <el-date-picker
                                        v-model="ruleForm.validityDate"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始时间"
                                        end-placeholder="结束时间"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        @change="changeValidityDate">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="" prop="validityLongTime" v-if="ruleForm.bannerType == 2">
                            <el-checkbox label="长期有效" name="type" v-model="ruleForm.validityLongTime" @change="validityLongTimeFn"></el-checkbox>
                        </el-form-item>
                        <el-form-item label="展示顺序" prop="seqNo">
                            <el-input 
                                v-model.number="ruleForm.seqNo" 
                                placeholder="请输入(数字越小展示越前)" 
                                maxlength="4">
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="dialog-wrap-right">
                    <div class="img-box">
                        <i class="el-icon-picture-outline" v-if="!bannerUrl"></i>
                        <img :src="bannerUrl" alt="" @click="checkImgFn(bannerUrl)">
                    </div>
                    <el-upload
                        class="upload-demo"
                        ref="uploadImg"
                        action="http://cs.umubao.com/ymfarm-1.0-SNAPSHOT/api/common/uploadFile"
                        :on-success="uploadSuccess"
                        :before-upload="beforeUpload"
                        :before-remove="beforeRemove"
                        multiple
                        name="multipartFile"
                        :limit="1"
                        :on-exceed="limitExceed"
                        :on-remove="onRemove">
                        <el-button size="small" type="success">banner图片{{isEditFlag ? '编辑' : '上传'}}</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
                    </el-upload>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="resetForm('ruleForm')">取 消</el-button>
                <el-button size="small" type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 查看图片 -->
        <el-dialog
            title="查看图片"
            :visible.sync="imgDialogFlag"
            center
            class="banner-check-wrap">
            <div class="demo-image__error">
                <div class="block">
                    <el-image :src="imgSrc"></el-image>
                </div>
            </div>
        </el-dialog>

        <!-- 删除提示 -->
        <el-dialog
            title="删除"
            :visible.sync="delDialogFlag"
            width="340px"
            :show-close="false"
            top="30vh"
            center
            class="banner-delete-wrap">
            <span>请确认是否删除 <i class="color-primary">{{currentDeleteTitle}}</i> banner？</span>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="cancelBannerFn">取 消</el-button>
                <el-button size="small" type="primary" @click="deleteBannerFn">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Storage from "@/utils/storage";
import BaseFormPage from '@/components/BaseFormPage';
export default {
    components: {
        BaseFormPage
    },
    data() {
        var checkValidityDate = (rule, value, callback) => {
            console.log('validityLongTime:', this.ruleForm.validityLongTime)
            if(!this.ruleForm.validityLongTime) {
                if (!value) {
                    return callback(new Error('请选择有效时间段或勾选长期有效'));
                }else{
                    callback();
                }
            } else {
                callback();
            }
        };
        return {
            loadingFlag: false,         //表格数据加载状态
            dialogFlag: false,          //弹窗显示状态
            delDialogFlag: false,       //删除弹窗显示状态
            imgDialogFlag: false,       //查看图片
            limitDialogFlag: false,     //展示数量限制
            title: '',
            date: '',
            startTime: '',
            endTime: '',

            pageIndex: 1,
            pageSize: 20,
            tableHeight: 200,           //表格初始高度
            tableData: [],              //表格数据
            pagination: {               //分页数据
                loadingFlag: false,     //数据加载状态
                currentPage: 1,         //当前页
                totalPage: 1,           //总页数
                totalNum: 0,            //总条数
                firstNum: 0,            //分页显示起始值
                endNum: 0               //分页显示结束值
            },

            imgSrc: '',

            dialogTitle: '',
            currentEditId: '',
            currentDeleteId: '',
            currentDeleteTitle: '',
            isEditFlag: false,
            bannerType: '',
            bannerTypeOptions: [
                {
                    value: 1,
                    label: 'banner图片'
                },
                {
                    value: 2,
                    label: '活动图片'
                }
            ],
            bannerTitle: '',
            bannerUrl: '',
            validityDate: '',
            startValidityTime: '',
            endValidityTime: '',
            validityLongTime: false,
            seqNo: '',
            seqNoOptions: [
                {
                    value: 0,
                    label: '0'
                },
                {
                    value: 1,
                    label: '1'
                },
                {
                    value: 2,
                    label: '2'
                }
            ],

            limitTitle: '',
            limitNum: '',
            limitOptions: [
                {
                    value: 1,
                    label: '1'
                },
                {
                    value: 2,
                    label: '2'
                },
                {
                    value: 3,
                    label: '3'
                },
                {
                    value: 4,
                    label: '4'
                },
                {
                    value: 5,
                    label: '5'
                },
            ],

            ruleForm: {
                bannerType: '',
                bannerTitle: '',
                linkUrl: '',
                validityDate: [],
                validityLongTime: true,
                seqNo: '',
            },
            rules: {
                bannerType: [
                    { required: true, message: '请选择图片类型', trigger: 'change' }
                ],
                bannerTitle: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                linkUrl: [
                    { required: true, message: '请输入链接URL', trigger: 'blur' },
                ],
                validityDate: [
                    { validator: checkValidityDate, trigger: 'blur' }
                ],
                seqNo: [
                    { required: true, message: '请选择展示顺序', trigger: 'change' },
                    { type: 'number', message: '展示顺序必须为数字'}
                ],
            },

            searchBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(266) == -1 ? false : true,
            addBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(267) == -1 ? false : true,
            limitBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(268) == -1 ? false : true,
            editBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(269) == -1 ? false : true,
            deleteBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(270) == -1 ? false : true,
        }
    },
    created() {
        this.getListData()
    },
    methods: {
        getListData() {
            this.loadingFlag = true;
            this.pagination.loadingFlag = true;
            let params = {
                title: this.title,
                startTime: this.startTime,
                endTime: this.endTime,
                pgCt: this.pageIndex,
                pgSz: this.pageSize
            }
            if(!this.title) {
                delete params.title
            }
            if(!this.date) {
                delete params.startTime
                delete params.endTime
            }

            this.$http.get('/banner/list', params)
                .then((res) => {
                    if(res.data.records.length > 0) {
                        this.pagination.totalPage = res.data.pages
                        this.pagination.totalNum = res.data.total
                        
                        res.data.records.forEach((item, index) => {
                            //列表下标
                            item.index = index
                            //列表序号
                            item.serialNumber = ((this.pageIndex - 1) * this.pageSize) + (index + 1)
                            item.startTime   = item.startTime || '--'
                            item.endTime     = item.endTime || '--'
                        })
                        this.pagination.firstNum = res.data.records[0].serialNumber
                        this.pagination.endNum = res.data.records[res.data.records.length-1].serialNumber
                    }else{
                        this.pagination.currentPage = 1
                        this.pagination.totalPage = 1
                        this.pagination.totalNum = 0
                        this.pagination.firstNum = 0
                        this.pagination.endNum = 0
                    }
                    this.tableData  = res.data.records;
                }).then(() => {
                    this.tableHeightFn();
                    this.loadingFlag = false;
                    this.pagination.loadingFlag = false;
                })
        },
        tableHeightFn() { //表格高度
            let tableDataLength = this.tableData.length;
            let minHeight = tableDataLength == 0 ? 0 : 80;
            this.$nextTick(function () {
                this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - minHeight;
                if(this.tableData.length <= 0) {
                    this.tableHeight = '60vh'
                }
                
                let self = this;
                window.onresize = function() {
                    self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - minHeight;
                    self.tableHeight = self.tableHeight < 200 ? 200 : self.tableHeight;
                }
            })
        },
        resetPageIndex() { //重置页码
            this.pagination.currentPage = 1;
            this.pageIndex = 1;
        },
        clearTitleFn() { //清空标题
            this.resetPageIndex()
            this.getListData()
        },
        changeDate() { //注册时间
            console.log('date:', this.date)
            if(this.date) {
                this.startTime = this.date[0]
                this.endTime = this.date[1].replace('00:00:00', '23:59:59')
            }else{
                this.startTime = ''
                this.endTime = ''
            }
            this.resetPageIndex()
            this.getListData()
        },
        searchFn() { //搜索
            this.resetPageIndex()
            this.getListData()
        },
        addFn() { //新增
            this.dialogTitle = '新增'
            this.dialogFlag = true
            this.isEditFlag = false
            this.resetBannerDetailFn()
        },
        showLimitFn() { //展示数量限制
            this.limitDialogFlag = true
            // 获取当前展示数量
            this.$http.get('/banner/banner_num')
                .then((res) => {
                    if(res.data.bannerNum) {
                        this.limitTitle = `展示数量设置（当前展示${res.data.bannerNum}个）`
                        this.limitNum = res.data.bannerNum
                    }else{
                        this.limitTitle = "展示数量设置"
                        this.limitNum = ''
                    }
                })
        },
        resetBannerDetailFn() {
            this.bannerType = ''
            this.bannerTitle = ''
            this.bannerUrl = ''
            this.validityDate = ''
            this.validityLongTime = ''
            this.seqNo = ''
        },
        checkImgFn(src) { //查看图片
            this.imgSrc = src
            this.imgDialogFlag = true
        },
        editInfoFn(id) { //编辑
            console.log(id)
            this.dialogTitle = '编辑'
            this.dialogFlag = true
            this.isEditFlag = true
            this.currentEditId = id
            this.getBannerDetail(id)
        },
        getBannerDetail(id) { //获取banner详情
            this.$http.get('/banner/detail/' + id)
                .then((res) => {
                    this.ruleForm.bannerType = res.data.type + ''
                    this.ruleForm.bannerTitle = res.data.title
                    this.bannerUrl = res.data.picUrl
                    this.ruleForm.linkUrl = res.data.link
                    if(res.data.startTime) {
                        this.startValidityTime = res.data.startTime
                        this.endValidityTime = res.data.endTime
                        this.ruleForm.validityDate = [res.data.startTime, res.data.endTime]
                    }else{
                        this.startValidityTime = ''
                        this.endValidityTime = ''
                        this.ruleForm.validityDate = []
                    }
                    // this.ruleForm.validityDate = ["2019-11-14 00:00:00", "2019-11-16 00:00:00"]
                    this.ruleForm.validityLongTime = res.data.isLong == 1 ? true : false
                    this.ruleForm.seqNo = res.data.seqNo
                })
        },
        deleteInfoFn(id, title) { //删除
            console.log(id)
            this.currentDeleteId = id;
            this.currentDeleteTitle = title;
            this.delDialogFlag = true;
        },
        cancelBannerFn() { //取消删除
            this.currentDeleteId = '';
            this.currentDeleteTitle = '';
            this.delDialogFlag = false;
        },
        deleteBannerFn() { //确认删除
            this.$http.get('/banner/delete/' + this.currentDeleteId)
                .then((res) => {
                    this.delDialogFlag = false;
                    this.$message({
                        message: '已删除',
                        type: 'success'
                    });
                    setTimeout(() => {
                        this.searchFn()
                    }, 1000)
                })
        },
        cFirstPageFn(pageNum) { //首页
            this.pageIndex = pageNum;
            this.getListData()
        },
        cLastPageFn(pageNum) { //尾页
            this.pageIndex = pageNum;
            this.getListData()
        },
        cJumpPageFn(pageNum) { //页码跳转
            this.pageIndex = pageNum;
            this.getListData()
        },
        cPreFn(pageNum) { //上一页
            this.pageIndex = pageNum;
            this.getListData()
        },
        cNextFn(pageNum) { //下一页
            this.pageIndex = pageNum;
            this.getListData()
        },
        resetParams() { //重置参数
            this.title = ''
            this.date = ''
            this.startTime = ''
            this.endTime = ''
            this.detailData = {}
            this.tableData = []
            this.pageIndex = 1
            this.pageSize = 20
            this.pagination = {
                loadingFlag: false,
                currentPage: 1,
                totalPage: 1,
                totalNum: 0,
                firstNum: 0,
                endNum: 0
            }
        },
        cRefreshFn() { //刷新
            this.resetParams()
            this.getListData()
        },

        changeLimitNum() { //展示数量限制
            console.log('changeLimitNum：', this.limitNum)
        },
        submitLimitFn() {
            let params = {
                num: this.limitNum
            }
            if(!this.limitNum) {
                this.$message.error('请选择展示数量');
                return
            }
            this.$http.get('/banner/banner_num_set', params)
                .then((res) => {
                    this.limitDialogFlag = false
                    this.$message({
                        message: '设置成功',
                        type: 'success'
                    });
                })
        },

        submitForm(formName) { //确认提交
            console.log('comein')
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.bannerUrl) {
                        this.addOrEditBannerFn()
                    }else{
                        this.$message.error('请上传banner图片');
                    }
                    // alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        addOrEditBannerFn() { //提交请求
            console.log('currentEditId:', this.currentEditId)
            let params = {
                id: this.currentEditId,
                type: this.ruleForm.bannerType,
                title: this.ruleForm.bannerTitle,
                picUrl: this.bannerUrl,
                link: this.ruleForm.linkUrl,
                seqNo: this.ruleForm.seqNo,
                startTime: this.startValidityTime,
                endTime: this.endValidityTime,
                isLong: this.ruleForm.validityLongTime ? 1 : 99,
            }
            if(this.ruleForm.bannerType == 1) { //banner图片
                delete params.link
                delete params.startTime
                delete params.endTime
            }
            if(!this.isEditFlag) {
                delete params.id
            }
            // if(this.ruleForm.validityLongTime) {
            //     delete params.startTime
            //     delete params.endTime
            // }else{
            //     delete params.isLong
            // }
            console.log('params:', JSON.stringify(params))
            this.$http.post('/banner/addOrUpdate', params)
                .then((res) => {
                    this.dialogFlag = false;
                    this.$message({
                        message: this.isEditFlag ? '编辑成功' : '新增成功',
                        type: 'success'
                    });
                    this.resetForm('ruleForm');
                    setTimeout(() => {
                        this.searchFn()
                    }, 1000)
                })
        },
        resetForm(formName) { //重置表单内容
            this.$refs[formName].resetFields();
            this.dialogFlag = false;
            this.bannerUrl = '';
            this.startValidityTime = ''
            this.endValidityTime = ''
            this.ruleForm.validityDate = []
            this.ruleForm.linkUrl = ''
            this.$refs.uploadImg.clearFiles();
        },

        changeBannerType() { //选择banner类型
            console.log('changeBannerType')
        },

        changeSeqNo() { //选择排序
            console.log('changeSeqNo')
        },

        changeValidityDate() { //选择有效时间
            console.log('changeValidityDate:', this.ruleForm.validityDate)
            if(this.ruleForm.validityDate) {
                this.startValidityTime = this.ruleForm.validityDate[0]
                this.endValidityTime = this.ruleForm.validityDate[1].replace('00:00:00', '23:59:59')
                this.ruleForm.validityLongTime = false;
            }else{
                this.startValidityTime = ''
                this.endValidityTime = ''
            }
        },

        validityLongTimeFn() {
            console.log('this.ruleForm.validityLongTime:', this.ruleForm.validityLongTime)
            if(this.ruleForm.validityLongTime) {
                this.ruleForm.validityDate = []
            }
        },

        limitExceed(files, fileList) { //图片个数限制
            this.$message.warning(`当前限制上传 1 个文件，本次选择了 ${files.length} 个文件，若需要更改图片，请删除已上传文件`);
        },
        uploadSuccess(res, file) { //图片上传成功
            this.bannerUrl = res.data.url;
        },
        beforeUpload(file) { //图片格式大小限制
            const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传图片只能是 jpg/png 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        beforeRemove(file, fileList) { //移除已上传图片
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        onRemove() { //移除图片成功
            this.bannerUrl = "";
        },
    }
}
</script>

<style lang="scss">
    .banner-dialog-content {
        .dialog-wrap {
            width: 100%;
            display: flex;
            justify-content: space-between;
            .dialog-wrap-left {
                width: 390px;
                .form-box {
                    .el-select .el-input.el-input--suffix {
                        width: 290px;
                    }
                    .el-date-editor--daterange.el-input__inner {
                        width: 290px;
                    }
                    .el-date-editor .el-range-input {
                        width: 33%;
                    }
                    .el-date-editor .el-range-separator {
                        width: 16%;
                    }
                }
                
            }
            .dialog-wrap-right {
                width: 224px;
                text-align: center;
                .img-box {
                    width: 224px;
                    height: 138px;
                    border: 1px solid #D0CFCF;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                    i {
                        font-size: 44px;
                        color: #D0CFCF;
                        line-height: 130px;
                    }
                }
                button {
                    margin-top: 24px;
                }
            }
        }
        .el-dialog__footer {
            .el-button+.el-button {
                margin-left: 50px;
            }
        }
    }

    .banner-limit-wrap {
        .dialog-wrap {
            display: flex;
            align-items: center;
            .limit-name {
                width: 70px;
                margin-right: 24px;
                text-align: right;
            }
            .search-item-content {
                flex: 1;
                margin-right: 20px;
            }
        }
        .el-dialog__footer {
            .el-button+.el-button {
                margin-left: 50px;
            }
        }
    }

    .banner-check-wrap {
        .el-dialog__body {
            text-align: center;
        }
    }

    .banner-delete-wrap {
        .el-dialog__header {
            padding: 18px 20px;
        }
        .el-dialog__body {
            padding-bottom: 24px;
            text-align: center;
        }
        .el-dialog__footer {
            .el-button+.el-button {
                margin-left: 50px;
            }
        }
    }
</style>